<template>
    <div class="wrap">
        <!-- <div class="login-name-title">
            <p>欢迎登录</p> 
            <h2>象右看齐供应链科技服务平台</h2>
        </div> -->
        <div class="wst-lo">
            <div class="login-header">
                <div class="login_title">
                 <div class="title_cn">CSS商城管理后台</div>
                </div>
            </div>
            <div class="login-wrapper">
                <div class="boxbg2"></div>
                <div class="box-p">
                    <div class="content-wrap">
                        <div class="login-box">
                        <div class="login-head"></div>
                        <div class="login-icon1"></div>
                        <div class="login-icon2"></div>
                        <div class="login-icon3"></div>
                        <input  @keyup.enter="login" v-model="account" id="loginName" type="text" class="layui-input ipt ">
                        <input  @keyup.enter="login" v-model="password" id="loginPwd" type="password" class="layui-input ipt">
                        <div class="frame">
                            <input v-model="codeNum"  @keyup.enter="login" maxlength="4" type="text" id="verifyCode" class="layui-input  ipt text2">
                            <img id="verifyImg" :src="info1.codeUrl" @click="getImg()">
                        </div>
                        </div>
                        <button id="loginbtn" type="button" @keyup.enter="login" @click="login" class="layui-btn layui-btn-big layui-btn-normal" style="width: 100%;">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="login-wrap">
            <div class="login-title">CCS商城管理后台</div>
            <div id="darkbannerwrap"></div>
            <input type="text" @keyup.enter="login" v-model="account" placeholder="请输入账号">
            <input type="password" @keyup.enter="login"  v-model="password" placeholder="请输入密码">
             <div class="login-button">
                <input class="btn btn-primary" value="登录"  type="button" @keyup.enter="login" @click="login">
            </div>
        </div> -->
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
import Vue from 'vue'
export default {
    name: 'login',
    data() {
        return {
            codeNum:'',
            account:'',
            password:'',
            info1:{}
        }
    },
    mounted(){
        this.getImg()
        // window.localStorage.removeItem('jwt');
        // Vue.http.options.headers.jwt = '';
        sessionStorage.removeItem('manager');
    },
    methods:{
        getImg(){
             let url = CONSTANT.URL.ADMIN.randomImgVerifyCode;
            common.get(url, '', res => {
               
                this.info1 = res.data.bussData;
            });
        },
        login(){
            if(this.codeNum.toLowerCase() !=this.info1.verifyCode.toLowerCase() ){
                this.$message({
                    type: 'warning',
                    message:'验证码输入错误'
                });
                this.getImg()
                return
            }
            let url = CONSTANT.URL.ADMIN.LOGIN;
            let param = {'userName':this.account,'password':this.password };
            this.$http.post(url, JSON.stringify(param), {emulateJSON:true}).then(res => {
                console.log(res.body);
                let data = res.body;
                if(data.code == 200){
                    this.$message({
                        type: 'success',
                        message: '登录成功!'
                    });
                    let info = data.data.bussData
                   //  console.log(data.data.bussData.sessionId);
                    sessionStorage.setItem('sessionId',info.sessionId);
                    sessionStorage.setItem('manager',this.account);
                    sessionStorage.setItem("mobile", info.mobile)
                    sessionStorage.setItem("roleName", info.roleName)
                    sessionStorage.setItem("avatarUrl", info.avatarUrl)
                    
                    console.log(sessionStorage.getItem('sessionId'));
                    location.href = `${location.origin}/sys/`
                }else{
                    this.$message({
                        type: 'warning',
                        message:data.data.errMsg
                    });
                }
            }, res => {
                 // error callback
            });
        }
    }
}
</script>

<style  lang="scss" scoped>
.wrap {
    height:100%;
    background: url(../../images/login_bg.png) no-repeat center;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    z-index: 999;
    .login-name-title{
        color: #fff;
        font-family: "Microsoft YaHei";
        h2{
            font-size: 38px;
        }
    }
}
.login-icon1, .login-icon2, .login-icon3 {
    width: 25px;
    height: 25px;
    background: url('../../images/login_icon.png') no-repeat;
    position: absolute;
}
.login-icon1 {
    top: 55px;
    left: 50px;
    background-position: 0 0;
}
.login-icon2 {
    top: 95px;
    left: 50px;
    background-position: 0 -30px;
}
.login-icon3 {
    top: 136px;
    left: 50px;
    background-position: 0 -61px;
}
.wst-lo {
    position: absolute;
    left: 50%;
    margin-left: -350px;
    top: 35%;
    margin-top: -140px;
    width: 700px;
}
.frame {
    padding-right: 0px;
    position: relative;
}

#verifyImg {
    cursor: pointer;
    width: 108px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 32px;
    position: absolute;
    z-index: 100;
    top: -7px;
    right: -5px;
}
.login-header {
    width: 445px;
    margin: 0 auto;
    margin-bottom: 20px;
    overflow: hidden;
    .login_title {
        float: right;
        width: 340px;
        text-align: left;
        margin-top: 4px;
        color: #fff;
    }
    .title_cn {
         color: #fff;
        font-size: 30px;
        position: relative;
    }
}
.box-p {
    position: absolute;
    top: 7%;
    left: 50%;
    margin: 0 auto;
    margin-left: -190px;
    padding: 35px 0 30px;
    float: none;
    width: 380px;
    height: 100%;
    input{
        margin-left: 35px;
        border-radius: 0!important;
        font-size: 15px!important;
        height: 30px!important;
        margin-bottom: 10px!important;
        border: 0!important;
        padding: 0!important;
        border-bottom: 1px solid #244eac!important;
        display: block!important;
        width: 90%!important;
        background-color: #fff!important;
    }
    .text2 {
        width: 252px!important;
    }
    .content-wrap {
        width: 82%;
        margin: 0 auto;
        .login-box {
            background-color: #fff;
            padding: 17px;
            border-radius: 3px;
            margin-bottom: 15px;
            padding-left: 15px;
            .login-head {
                width: 90px;
                height: 90px;
                background-size: contain;
                position: absolute;
                top: 56px;
                right: 0;
            }
        }
        .layui-btn-big {
            height: 44px;
            line-height: 44px;
            padding: 0 25px;
            font-size: 16px;
            background-color: #3e87da!important;
            cursor: pointer;
        }
        .layui-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            &:hover {
                opacity: .8;
                filter: alpha(opacity=80);
                color: #fff;
            }
        }
    }
}
.login-wrapper {
    text-align: center;
    position: relative;
}
.boxbg2 {
    position: relative;
    opacity: 0.16;
    margin: 0 auto;
    padding: 35px 0 30px;
    float: none;
    width: 400px;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #fff;
    height: 260px;
    margin-left: 150px;
    filter: alpha(opacity=16);
}
// .login-wrap {
//     position:relative;
//     top:150px;
//     right: -25%;
//     margin: 0px auto 0 auto;
//     min-height: 420px;
//     max-width: 420px;
//     padding: 40px;
//     background-color: #ffffff;
//     margin-left: auto;
//     margin-right: auto;
//     border-radius: 4px;
//     /* overflow-x: hidden; */
//     box-sizing: border-box;
// }

// .login-title {
//     margin: 10px 0 0 -58px;
//     padding: 18px 10px 18px 60px;
//     background: #3e87da;
//     position: relative;
//     color: #fff;
//     font-size: 14px;
// }

#darkbannerwrap {
    background: url(../../images/aiwrap.png);
    width: 18px;
    height: 10px;
    margin: 0 0 20px -58px;
    position: relative;
}

input[type=text], input[type=file], input[type=password], input[type=email], select {
    border: 1px solid #DCDEE0;
    vertical-align: middle;
    border-radius: 3px;
    height: 50px;
    padding: 0px 16px;
    font-size: 14px;
    color: #555555;
    outline: none;
    width: 90%;
    margin-bottom: 25px;
    box-sizing: content-box;
}

.login-tips {
    margin-top: -15px;
    margin-bottom: 20px;
    text-align: right;
    text-decoration: none;
    color: #1b66c7;
    font-size: 16px;
    cursor: pointer;
}
.login-button input{
    padding: 12px 24px;
    margin: 0px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    width: 100%;
    cursor: pointer;
    color: #ffffff;
    background-color: #3e87da;
    border-radius: 3px;
    border: none;
}
</style>
